<template>
	<div class="personnelList shop_list">
		<el-breadcrumb separator="/">
			<el-breadcrumb-item :to="{ path: '/dataExpress' }"><i class="lh fw_300 lh-seller"></i></el-breadcrumb-item>
			<el-breadcrumb-item>B端-商户</el-breadcrumb-item>
			<el-breadcrumb-item>店铺管理</el-breadcrumb-item>
		</el-breadcrumb>
		<div class="content_Box box-shadow mt_15">
			<div class="py_5 px_10">
				<el-row>
					<el-col :span="4">
						<!-- <el-button type="success" class="fl" @click="goToAdd()" round size="mini">新增店铺</el-button> -->
						<el-button type="default" @click="downloadOrder()" round size="mini">导出</el-button>
						<span style="color: #909399;">排序</span>
						<el-select class="w_110" v-model="order" placeholder="排序" @change="listShop">
							<el-option label="创建时间" value="1"></el-option>
							<el-option label="用工次数" value="2"></el-option>
						</el-select>
					</el-col>
					<el-col :span="20">
						<el-form :inline="true" :model="ruleForm" class="form-inline fr" @keyup.enter.native="shearchBtn()">
							<el-form-item class="w_130">
								<el-autocomplete
									class="inline-input"
									v-model="shop_name"
									:fetch-suggestions="querySearch"
									placeholder="店铺名称"
									:trigger-on-focus="true"
									@select="handleSelect"
								></el-autocomplete>
							</el-form-item>
							<el-form-item class="w_130">
								<el-input v-model="company_name" placeholder="公司或营业执照号"></el-input>
							</el-form-item>
							<el-form-item class="w_130">
								<el-autocomplete
									class="inline-input"
									v-model="business_director"
									:fetch-suggestions="querySearch5"
									placeholder="销售"
									:trigger-on-focus="true"
									@select="handleSelect5"
								></el-autocomplete>
							</el-form-item>
							<lh-agent-list @sendValue="setValue" :reset="agent_reset"></lh-agent-list>
							<el-form-item>
								<el-select class="w_110" v-model="city_val" placeholder="请选择城市" clearable @change="changeCity">
									<el-option
										v-for="item in cityList"
										:key="item.id"
										:label="item.name"
										:value="`${item.id}|${item.name}|${item.city_sn}`"
									></el-option>
								</el-select>
							</el-form-item>

							<el-form-item>
								<el-select
									v-model="s_time_slot"
									multiple
									collapse-tags
									placeholder="商圈"
									@change="changeBtndialogarea"
								>
									<el-button
										size="mini"
										type="primary"
										class="round-right all-area"
										@click="selectAllArea()"
										native-type="button"
										>{{ areaStatus ? '全选' : '取消全选' }}</el-button
									>
									<el-option
										v-for="item in areaList"
										:key="item.id"
										:label="item.area_name"
										:value="`${item.id}|${item.area_name}`"
									></el-option>
								</el-select>
							</el-form-item>

							<el-form-item class="w_90">
								<el-select v-model="type" placeholder="商户类别">
									<el-option label="商户类别" value=""></el-option>
									<el-option label="企业" value="1"></el-option>
									<el-option label="个人" value="2"></el-option>
								</el-select>
							</el-form-item>

							<el-form-item>
								<el-select v-model="sign_status" placeholder="合作状态" class="w_100">
									<el-option label="合作状态" value="20,30,40,50,60"></el-option>
									<!-- <el-option label="已注册" value="10"></el-option> -->
									<el-option label="已申请" value="20"></el-option>
									<el-option label="已合作" value="30"></el-option>
									<el-option label="未通过" value="40"></el-option>
									<el-option label="到期" value="50"></el-option>
									<el-option label="停止合作" value="60"></el-option>
								</el-select>
							</el-form-item>

							<el-form-item>
								<el-select v-model="is_agreement" placeholder="合同状态" class="w_100">
									<el-option label="合同状态" value=""></el-option>
									<el-option label="已签约" value="1"></el-option>
									<el-option label="未签约" value="2"></el-option>
								</el-select>
							</el-form-item>

							<el-form-item class="w_100">
								<el-select v-model="status" placeholder="店铺状态">
									<el-option label="店铺状态" value=""></el-option>
									<el-option label="启用" value="1"></el-option>
									<el-option label="已停用" value="2"></el-option>
								</el-select>
							</el-form-item>

							<el-form-item class="w_100">
								<el-select v-model="yg_status" placeholder="用工状态">
									<el-option label="用工状态" value=""></el-option>
									<el-option label="已用工" value="1"></el-option>
									<el-option label="未用工" value="2"></el-option>
								</el-select>
							</el-form-item>

							<el-form-item class="w_100">
								<el-select v-model="origin" placeholder="来源">
									<el-option label="来源" value=""></el-option>
									<el-option label="管理后台" value="1"></el-option>
									<el-option label="B端小程序" value="2"></el-option>
									<el-option label="灵活助手" value="3"></el-option>
									<el-option label="数据导入" value="4"></el-option>
									<el-option label="灵活管家" value="7"></el-option>
								</el-select>
							</el-form-item>

							<el-form-item class="w_100">
								<el-select v-model="is_prepay" placeholder="预付开通">
									<el-option label="预付开通" value=""></el-option>
									<el-option label="是" value="1"></el-option>
									<el-option label="否" value="2"></el-option>
								</el-select>
							</el-form-item>

							<el-form-item prop="date1" class="w_120">
								<el-date-picker
									type="date"
									value-format="yyyy-MM-dd"
									placeholder="申请开始时间"
									v-model="ruleForm.date1"
									style="width: 100%;"
								></el-date-picker> </el-form-item
							>~
							<el-form-item prop="date2" class="w_120">
								<el-date-picker
									type="date"
									value-format="yyyy-MM-dd"
									placeholder="申请结束时间"
									v-model="ruleForm.date2"
									style="width: 100%;"
								></el-date-picker>
							</el-form-item>
							<el-button size="mini" type="primary" native-type="button" class="round-right" @click="shearchBtn"
								>搜索</el-button
							>
							<el-button size="mini" round @click="resetBtn">重置</el-button>
						</el-form>
					</el-col>
				</el-row>
			</div>
			<div class="tableMaxBox">
				<template>
					<!-- <div style="float: right; margin: 0 20px 10px 0;">
						<el-button size="mini" @click="shouMenu()">{{ shouMenuStatus == true ? '折叠' : '展开' }}</el-button>
					</div> -->
					<el-table :data="shopList" stripe>
						<el-table-column prop="id" label="序号" width="50px" align="center" type="index"></el-table-column>
						<el-table-column prop="shop_sn" label="店铺编号" width="150"></el-table-column>
						<el-table-column prop="name" label="店铺名称" width="170px">
							<template slot-scope="{ row }">
								<span class="pointer u text-primary" @click="goToTag(row)">{{ row.name }}</span>
								<br />
								<span class="">{{ row.company_name }}</span>
							</template>
						</el-table-column>

						<el-table-column label="城市" align="center" width="80px">
							<template slot-scope="{ row }">
								<span>{{ row.city_name }}</span>
							</template>
						</el-table-column>
						<el-table-column prop="area_name" label="商圈" width="110"></el-table-column>
						<el-table-column prop="agent_name" label="灵活儿代理" width="110"></el-table-column>
						<el-table-column prop="business_director" label="销售" width="100px"></el-table-column>
						<el-table-column label="用工状态" width="90">
							<template slot-scope="{ row }">
								<span class="text-success" v-if="row.is_order == '1'">已用工</span>
								<span class="text-danger" v-if="row.is_order == '2'">未用工</span>
							</template>
						</el-table-column>
						<el-table-column label="首次用工日期" width="130">
							<template slot-scope="{ row }">
								<span>{{ row.first_order_date | format }}</span>
							</template>
						</el-table-column>
						<el-table-column label="灵活儿合作状态" width="130" align="center">
							<template slot-scope="{ row }">
								<span class="text-primary" v-if="row.sign_status == '10'">未合作</span>
								<span class="text-warning" v-if="row.sign_status == '20'">已申请</span>
								<span class="text-success" v-if="row.sign_status == '30'">已合作</span>
								<span class="text-danger" v-if="row.sign_status == '40'">未通过</span>
								<span class="text-gray" v-if="row.sign_status == '50'">到期</span>
								<span class="text-gray" v-if="row.sign_status == '60'">停止合作</span>
							</template>
						</el-table-column>
						<el-table-column prop="contract_status_name" label="合同状态" width="150px"></el-table-column>
						<el-table-column prop="cooperation_apply_time" label="申请合作时间" width="150px"></el-table-column>

						<el-table-column label="结算方式" width="120">
							<template slot-scope="{ row }">
								<span v-if="row.is_prepay != 1">
									<span>后付费</span>
									<span v-if="row.settlement_cycle == 'day'">（日）</span>
									<span v-else-if="row.settlement_cycle == 'week'">（周）</span>
									<span v-else-if="row.settlement_cycle == 'month'">（月）</span>
								</span>
								<span v-else>预付费</span>
							</template>
						</el-table-column>
						<el-table-column label="店铺状态">
							<template slot-scope="{ row }">
								<span class="text-success" v-if="row.status == '1'">启用</span>
								<span class="text-danger" v-if="row.status == '2'">已停用</span>
							</template>
						</el-table-column>
						<el-table-column label="操作" width="300px" fixed="right" align="right" v-if="shouMenuStatus">
							<template slot-scope="{ row }">
								<el-link type="info" class="InfoFont text-success" :underline="false" @click="goLhcooperation(row)"
									>灵活儿合作</el-link
								>
								<el-link type="info" class="InfoFont text-success" :underline="false" @click="QdmBtn(row)"
									>签到码</el-link
								>
								<el-link
									v-if="row.sign_status != '20'"
									type="info"
									:underline="false"
									class="InfoFont"
									@click="goToShopAccount(row)"
									>金库</el-link
								>
								<el-link type="info" :underline="false" class="InfoFont" @click="goToShopListAccount(row)"
									>账号</el-link
								>
								<el-link type="info" :underline="false" class="InfoFont" @click="goToBillList(row)">帐单</el-link>
								<el-popover trigger="hover" placement="right" style="display: inline-block;">
									<div>
										<el-link type="info" class="InfoFont text-success" :underline="false" @click="goToTag(row)"
											>编辑</el-link
										>
										<el-link type="info" :underline="false" class="InfoFont" @click="goToPersonnelLabel(row)"
											>标签</el-link
										>
										<el-link
											type="info"
											class="InfoFont text-success"
											:underline="false"
											v-if="row.status == 2"
											@click="redactBtn(row)"
											>启用</el-link
										>
										<el-link
											type="info"
											class="InfoFont text-success"
											:underline="false"
											v-if="row.status == 1"
											@click="redactBtn(row)"
											>停用</el-link
										>
										<el-link type="info" :underline="false" class="InfoFont" @click="goTaskList(row)">任务</el-link>
									</div>
									<div slot="reference" class="name-wrapper" style="cursor: pointer;">
										<span class="lh lh-caozuo" style="color: #2d4198; font-weight: bold;"></span>
									</div>
								</el-popover>
							</template>
						</el-table-column>
					</el-table>
					<!-- 分页组件 -->
					<page :total="total" :pageNums="pageNum" :disableMountedFetch="true" @pagedata="onChildValue"></page>
				</template>
			</div>
		</div>
		<!-- 商户状态-关闭弹框 -->
		<el-dialog :title="diaTitle" :visible.sync="StateShowStop" width="560px" :close-on-click-modal="false">
			<div class="auditCentent">
				<div class="p_30">停用店铺后，店铺将无法登录客户端系统！</div>
			</div>
			<div slot="footer" class="dialog-footer">
				<span class="btnOK mr_20" @click="addMenuBtn(2)">确 定</span>
				<span class="resetBtn" @click="hiddenRY">取 消</span>
			</div>
		</el-dialog>

		<!-- 商户状态-启用弹框 -->
		<el-dialog :title="diaTitle" :visible.sync="StateShowStart" width="560px" :close-on-click-modal="false">
			<div class="auditCentent">
				<span>启用店铺，店铺可正常登录平台，进行需求发单。</span>
			</div>
			<div slot="footer" class="dialog-footer">
				<span class="btnOK mr_20" @click="addMenuBtn(1)">确 定</span>
				<span class="resetBtn" @click="hiddenRY">取 消</span>
			</div>
		</el-dialog>
		<!-- 店铺签到码 -->
		<el-dialog :title="StateShowQdm_name" :visible.sync="StateShowQdm" width="800px" :close-on-click-modal="false">
			<div class="qr-title">
				<div :class="[RzmDate ? 'w50' : 'w100', 'sign-code-name']">签到码</div>
				<div class="sign-code-name w50" v-if="RzmDate">入职码</div>
			</div>
			<div class="qr-box">
				<div class="qr" v-if="QdmDate">
					<img :src="QdmDate" alt="签到码" />
					<p class="hint" v-if="RzmDate">仅用于考勤打卡</p>
				</div>
				<div class="qr" v-if="RzmDate">
					<img :src="RzmDate" alt="入职码" />
					<p class="hint">仅用于新员工注册</p>
				</div>
			</div>
		</el-dialog>
		<!-- 贴标签-弹框 -->
		<el-dialog :title="diaTitle" :visible.sync="labels" width="560px" :close-on-click-modal="false">
			<div class="auditCentent">
				<!-- 标签列表 -->
				<div class="labels">
					<div
						class="labels_label"
						v-for="(item, index) in labels_arr"
						:key="index"
						:class="item.check == 1 ? 'check_label' : ''"
						@click="item.check == 1 ? (item.check = 0) : (item.check = 1)"
					>
						{{ item.label_name }}
					</div>
				</div>
			</div>
			<div slot="footer" class="dialog-footer">
				<span class="btnOK mr_20" @click="addMenuBtnBQ()">确 定</span>
				<!-- <span class="btnOK mr_20">确 定</span> -->
				<span class="resetBtn" @click="labels = false">取 消</span>
			</div>
		</el-dialog>
	</div>
</template>

<script>
import dayjs from 'dayjs'
const common = require('../../../static/tool.js')
import {
	fetchAreaList,
	getPriceLabelList,
	fetchPresetList,
	fetchShopList,
	fetchSignCoding,
	fetchEntryCoding
} from '@/api/shop.js'
import { fetchCityList } from '@/api/city.js'
import { openPrepay } from '@/api/bill.js'
export default {
	name: 'ShopList',
	data() {
		return {
			id: '',
			dataMes: '',
			ids: '',
			agreement: '',
			index: '',
			windowSizeHeight: document.documentElement.clientHeight, //浏览器可视化窗口的大小
			screenHeight: document.documentElement.clientHeight,
			manageInfo: JSON.parse(sessionStorage.getItem('manageInfo')), //登录信息
			url: common.url,
			head_url: common.head_url,
			new_staff_status: '', //当前人的审核状态
			shouMenuStatus: true,
			//搜索对应值
			business_id: '', //所属商户ID
			business_name: '', //所属商户name
			business_type: '', //所属商户类型
			shop_id: '', //店铺id
			shop_sn: '', //店铺sn
			shop_name: '', //店铺名
			company_name: '', //公司名称
			business_director: '', //销售
			cityList: [], // 城市列表
			city_id: '',
			area_id: '', //商圈ID
			area_name: '', //商圈name
			s_time_slot: '',
			city_val: '',
			type: '', //店铺类别[1]企业[2]个人
			sign_status: '20,30,40,50,60', //签约状态10、已注册 20、申请签约 30签约成功 40签约失败 50 到期
			is_agreement: '', //签约状态
			yg_status: '', //用工状态
			status: '1', //店铺状态[1]启用[2]已停用
			origin: '', //1 后台 2 小程序
			is_prepay: '', //1 是 2 否
			ruleForm: {
				date1: '', //开始时间
				date2: '' //结束时间
			},

			shopList: [], //店铺列表
			shopList2: [], //搜索栏目的店铺列表
			BusinessUserList: [], //销售列表
			diaTitle: '', //弹框title
			endStatus: false,
			StateShowStop: false, //人员状态-弹框关闭
			StateShowStart: false, //人员状态-弹框关闭
			StateShowQdm: false, //店铺签到码
			StateShowQdm_name: '', //店铺名字
			JobState: false, //用工频率弹框
			labels: false, //标签弹框
			//向分页组件传值
			total: 0,
			pageNum: 1,
			pageSizeNow: 20,
			// 审核状态
			tag: '30',
			text: '',
			labels_arr: [], //店铺标签
			//用工频率-相关
			auto_status: false,
			frequency_shop_id: '',
			frequency_shop_sn: '',
			frequency_business_sn: '',
			frequency_business_id: '',
			frequency_city_id: '',
			frequency_area_id: '',
			areaList: [], //区域列表
			autoorder: false, //自动下单状态
			endobj: { start: '00:29', step: '00:30', end: '23:59' },
			//接活设置选项-一周七天
			weekdata: [
				{
					id: 1,
					name: '周一',
					arr: []
				},
				{
					id: 2,
					name: '周二',
					arr: []
				},
				{
					id: 3,
					name: '周三',
					arr: []
				},
				{
					id: 4,
					name: '周四',
					arr: []
				},
				{
					id: 5,
					name: '周五',
					arr: []
				},
				{
					id: 6,
					name: '周六',
					arr: []
				},
				{
					id: 7,
					name: '周天',
					arr: []
				}
			],
			//岗位列表
			TypeArr: [],
			//签到码
			QdmDate: '',
			RzmDate: '',
			order: '1',
			areaStatus: true,
			agent_id: '',
			agent_reset: 0
		}
	},
	computed: {},
	watch: {
		weekdata: {
			//监听的对象
			deep: true, //深度监听设置为 true
			handler: function (newV, oldV) {
				let auto_status = false
				newV.forEach(element => {
					if (element.arr.length) {
						auto_status = true
					}
				})

				this.auto_status = auto_status
			}
		},
		//商圈改变
		areaList(newValue, oldValue) {
			this.listShop()
		}
	},
	created() {
		if (this.$route.query.id) {
			this.id = this.$route.query.id //接收传参->商户信息
			this.business_id = this.id
			this.business_sn = this.$route.query.sn
			this.business_name = this.$route.query.name
			this.business_type = this.$route.query.type
		}

		// if (this.$route.query.shop_name) {
		// 	this.shop_name = this.$route.query.shop_name
		// 	this.shop_id = this.$route.query.shop_id
		// }

		if (!sessionStorage.getItem('manageInfo')) {
			// 判断是否登录
			window.location = 'login.html'
			return
		}

		// if order
		if (localStorage.getItem('shop_order')) {
			this.order = localStorage.getItem('shop_order')
		} else {
			this.order = '1'
		}

		this.selectedAreasMap = {}
	},
	mounted() {
		this.getBusinessUser()
	},
	methods: {
		async fetchShopList() {
			try {
				let ret = await fetchShopList({
					sign_status: '20,30,40,50',
					city_id: this.city_id,
					agent_id: this.agent_id
				})
				this.shopList2 = ret.list.map(item => {
					return {
						...item,
						value: item.name
					}
				})
			} catch (err) {
				console.log('err:', err)
			}
		},
		async listArea(city_id) {
			try {
				this.s_time_slot = []
				let ret = await fetchAreaList({
					city_id: city_id,
					agent_id: this.agent_id
				})
				if (ret.list.length) {
					ret.list.forEach(item => {
						item.value = item.area_name
					})
					this.areaList = ret.list

					// 如果本地this.area_arr。存在值，那么不再赋予，如果不存在。赋予相关值
					// if (this.s_time_slot == '' || this.s_time_slot == null) {
					//   // 默认选中非254-平谷的
					//   this.areaList.forEach(element => {
					//     // 平谷
					//     if (element.area_name != '平谷') {
					//       var pusharr = element.id + '|' + element.area_name
					//       this.s_time_slot.push(pusharr)
					//     }
					//   })
					// }
				} else {
					this.areaList = []
				}
			} catch (err) {
				console.log('--------11111 err', err)
			}
		},

		listShop() {
			//获取商铺列表
			let fn = new FormData()
			fn.append('pageSize', this.pageSizeNow) //每页多少条
			fn.append('page', this.pageNum) //页数
			fn.append('business_id', this.business_id)
			fn.append('name', this.shop_name)
			if (this.shop_name == '') {
				this.shop_sn = ''
			}
			fn.append('shop_sn', this.shop_sn)
			fn.append('city_id', this.city_id)
			var s_departmentIds_Arr = []
			this.s_time_slot.forEach(element => {
				let [id, name] = element.split('|')
				s_departmentIds_Arr.push(id.toString())
			})
			fn.append('area_id', s_departmentIds_Arr.toString())
			fn.append('type', this.type)
			fn.append('sign_status', this.sign_status)
			fn.append('is_order', this.yg_status)
			fn.append('origin', this.origin)
			fn.append('is_prepay', this.is_prepay)
			fn.append('status', this.status)
			fn.append('business_director', this.business_director) //销售
			fn.append('agent_id', this.agent_id)
			fn.append('is_agreement', this.is_agreement)
			fn.append('company_name', this.company_name)
			var ruleForm_date1 = ''
			var ruleForm_date2 = ''
			if (this.ruleForm.date1 == null) this.ruleForm.date1 = ''
			if (this.ruleForm.date2 == null) this.ruleForm.date2 = ''

			if (this.ruleForm.date1 && !this.ruleForm.date2) {
				this.ruleForm.date2 = dayjs().format('YYYY-MM-DD')
			}
			if (!this.ruleForm.date1 && this.ruleForm.date2) {
				this.ruleForm.date1 = dayjs().format('YYYY-MM-DD')
			}

			if (this.ruleForm.date1 != '' && this.ruleForm.date2 != '') {
				//开始时间与结束时间同时存在
				ruleForm_date1 = this.ruleForm.date1 + ' 00:00:00'
				ruleForm_date2 = this.ruleForm.date2 + ' 23:59:59'
			}
			fn.append('start_time', ruleForm_date1)
			fn.append('end_time', ruleForm_date2)

			if (this.ruleForm.date1 && !this.ruleForm.date2) {
				this.ruleForm.date2 = dayjs().format('YYYY-MM-DD')
			}
			if (!this.ruleForm.date1 && this.ruleForm.date2) {
				this.ruleForm.date1 = dayjs().format('YYYY-MM-DD')
			}

			if (this.ruleForm.date1 != '' && this.ruleForm.date2 != '') {
				//开始时间与结束时间同时存在
				ruleForm_date1 = this.ruleForm.date1 + ' 00:00:00'
				ruleForm_date2 = this.ruleForm.date2 + ' 23:59:59'
			}
			fn.append('start_time', ruleForm_date1)
			fn.append('end_time', ruleForm_date2)

			//显示 店铺用工频率 的字段
			fn.append('isPreset', 1)

			if (+this.order == 1) {
				fn.append('order', JSON.stringify({ add_time: -1 })) //排序
			} else if (+this.order == 2) {
				fn.append('order', JSON.stringify({ task_count: -1 })) //排序
			}

			// order
			localStorage.setItem('shop_order', this.order)

			this.$http.post(this.url + '/shop/list', fn).then(
				res => {
					if (res.data.msg == '查询成功' || res.data.code == '200') {
						if (res.data.data != null) {
							res.data.data.list.forEach(item => {
								item.value = item.name
								if (item.first_order_date === '0000-00-00 00:00:00') {
									item.first_order_date = ''
								}
							})
							this.shopList = res.data.data.list
							this.total = res.data.data.count
						} else {
							this.shopList = []
							this.total = 0
						}
					} else if (res.data.code == '8886') {
						//code   8886  登录过期
						sessionStorage.clear()
						this.$alert('登录已过期，请重新登录 !', '提示', {
							confirmButtonText: '确定',
							callback: action => {
								window.location = 'login.html'
							}
						})
						return
					} else {
						this.$message.error(res.data.msg)
						return
					}
				},
				res => {
					this.$message.error('网络错误！')
					return
				}
			)
		},
		//去任务列表
		goTaskList(row) {
			const { href } = this.$router.resolve({
				path: '/taskList',
				query: { shop_id: row.id, shop_sn: row.shop_sn, shop_name: row.name }
			})
			window.open(href, '_blank')
		},
		//标签接口
		goToPersonnelLabel(e) {
			this.ids = e.id
			this.labels = true
			this.diaTitle = '平台标签'

			let fn = new FormData()
			fn.append('shop_id', this.ids) //相关id
			fn.append('label_type', 'platform_shop')
			this.$http.post(this.url + '/label/list', fn).then(
				res => {
					if (res.data.msg == '查询成功' || res.data.code == '200') {
						this.labels_arr = res.data.data.reverse() //进行逆序
					} else if (res.data.code == '8886') {
						//code   8886  登录过期
						sessionStorage.clear()
						this.$alert('登录已过期，请重新登录 !', '提示', {
							confirmButtonText: '确定',
							callback: action => {
								window.location = 'login.html'
							}
						})
						return
					} else {
						this.$message.error(res.data.msg)
						return
					}
				},
				res => {
					this.$message.error('网络错误！')
					return
				}
			)
		},
		addMenuBtnBQ() {
			//查找所有选中的标签
			var label_arr = []
			this.labels_arr.forEach(item => {
				if (item.check == 1) {
					//数组插入
					label_arr.push(item.id)
				}
			})
			let fn = new FormData()
			fn.append('shop_id', this.ids) //相关id
			fn.append('label', label_arr.toString())
			this.$http.post(this.url + '/shop/setLabel', fn).then(
				res => {
					if (res.data.code == '200') {
						this.$message.success(res.data.msg)
					} else if (res.data.code == '8886') {
						//code   8886  登录过期
						sessionStorage.clear()
						this.$alert('登录已过期，请重新登录 !', '提示', {
							confirmButtonText: '确定',
							callback: action => {
								window.location = 'login.html'
							}
						})
						return
					} else {
						this.$message.error(res.data.msg)
						return
					}
				},
				res => {
					this.$message.error('网络错误！')
					return
				}
			)

			this.labels = false
		},
		//获取销售列表
		getBusinessUser() {
			let fn = new FormData()
			this.$http.post(this.url + '/manageUser/getBusinessUser', fn).then(
				res => {
					if (res.data.msg == '查询成功!' || res.data.code == '200') {
						if (res.data.data.list != null) {
							res.data.data.list.forEach(item => {
								item.value = item.nickname
							})
							this.BusinessUserList = res.data.data.list
						} else {
							this.BusinessUserList = []
						}
					} else if (res.data.code == '8886') {
						//code   8886  登录过期
						sessionStorage.clear()
						this.$alert('登录已过期，请重新登录 !', '提示', {
							confirmButtonText: '确定',
							callback: action => {
								window.location = 'login.html'
							}
						})
						return
					} else {
						this.$message.error(res.data.msg)
						return
					}
				},
				res => {
					this.$message.error('网络错误！')
					return
				}
			)
		},

		shearchBtn() {
			// 搜索
			this.pageNum = 1
			this.listShop()
		},

		async resetBtn() {
			//重置
			await this.resetData() //重置请求数据
			this.agent_reset += 1
		},

		async resetData() {
			//重置请求数据
			this.pageNum = 1
			this.business_id = ''
			this.business_name = ''
			this.shop_id = ''
			this.shop_sn = ''
			this.shop_name = ''
			this.type = ''
			this.sign_status = '20,30,40,50,60'
			this.yg_status = ''
			this.is_order = ''
			this.status = '1'
			this.origin = ''
			this.is_prepay = ''
			this.business_director = ''
			this.ruleForm.date1 = ''
			this.ruleForm.date2 = ''
			this.company_name = ''
			this.is_agreement = ''
		},

		goToEdit(row) {
			//编辑页面
			this.$router.push({
				path: '/merchantsEdit',
				query: {
					id: row.id
				}
			})
		},

		goToTag(row) {
			//跳转店铺详情
			const { href } = this.$router.resolve({ path: '/shopTag', query: { id: row.id } })
			window.open(href, '_blank')
		},
		goToShopAccount(row) {
			//跳转店铺账户
			const { href } = this.$router.resolve({
				path: '/shopaccount',
				query: { account_sn: row.account_sn, shop_sn: row.shop_sn, shop_name: row.name }
			})
			window.open(href, '_blank')
		},
		goToBillList(row) {
			//跳转帐单
			const { href } = this.$router.resolve({
				path: '/billShopList',
				query: { shop_id: row.id, shop_sn: row.shop_sn, shop_name: row.name }
			})
			window.open(href, '_blank')
		},
		goToAdd() {
			//添加人员
			if (this.id != '') {
				this.$router.push({
					path: '/shopAdd',
					query: {
						business_id: this.business_id,
						business_sn: this.business_sn,
						business_name: this.business_name,
						business_type: this.business_type
					}
				})
			} else {
				this.$router.push({
					path: '/shopAdd'
				})
			}
		},

		//店铺的自动完成
		querySearch(queryString, cb) {
			var restaurants = this.shopList2
			var results = queryString ? restaurants.filter(this.createFilter(queryString)) : restaurants
			// 调用 callback 返回建议列表的数据
			cb(results)
		},
		createFilter(queryString) {
			return restaurant => {
				return restaurant.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0
			}
		},
		handleSelect(item) {
			this.shop_id = item.id
			this.shop_sn = item.shop_sn
		},

		createFilter3(queryString) {
			return restaurant => {
				return restaurant.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0
			}
		},

		//商圈的自动完成
		querySearch4(queryString, cb) {
			var restaurants = this.areaList
			var results = queryString ? restaurants.filter(this.createFilter4(queryString)) : restaurants
			// 调用 callback 返回建议列表的数据
			cb(results)
		},
		createFilter4(queryString) {
			return restaurant => {
				return restaurant.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0
			}
		},
		handleSelect4(item) {
			this.area_id = item.id
		},
		//店铺-销售
		querySearch5(queryString, cb) {
			var restaurants = this.BusinessUserList
			var results = queryString ? restaurants.filter(this.createFilter5(queryString)) : restaurants
			// 调用 callback 返回建议列表的数据
			cb(results)
		},
		createFilter5(queryString) {
			return restaurant => {
				return restaurant.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0
			}
		},
		handleSelect5(item) {
			this.business_director = item.nickname
		},
		//商户状态切换
		redactBtn(e, index) {
			this.dataMes = e
			this.ids = e.id
			this.index = index
			if (e.status == '1') {
				// 弹框1
				this.StateShowStop = true //状态关闭
				this.diaTitle = '温馨提示'
			} else {
				// 弹框2
				this.StateShowStart = true //状态启用
				this.diaTitle = '温馨提示'
			}
		},
		//店铺签到码
		async QdmBtn(e, index) {
			try {
				let res = await fetchSignCoding({ shop_sn: e.shop_sn })
				this.QdmDate = res ? 'data:image/png;base64,' + res : ''

				let rzm = await fetchEntryCoding({ shop_sn: e.shop_sn })
				this.RzmDate = rzm ? 'data:image/png;base64,' + rzm : ''

				this.StateShowQdm_name = e.name
				this.StateShowQdm = true
			} catch (err) {
				console.log(err)
			}
		},
		//隐藏商户弹框
		hiddenRY() {
			this.StateShowStart = false
			this.StateShowStop = false
			this.StateShowQdm = false
			this.new_staff_status = ''
			this.tag = '30'
			this.text = ''
		},
		// 商户状态-弹框确认
		addMenuBtn(e) {
			let fn = new FormData()
			fn.append('id', this.ids) //相关id
			fn.append('status', e) //商铺状态
			this.$http.post(this.url + '/shop/edit', fn).then(
				res => {
					if (res.data.msg == '操作成功!' || res.data.code == '200') {
						this.$message.success(res.data.msg)
						this.listShop()
					} else if (res.data.code == '8886') {
						//code   8886  登录过期
						sessionStorage.clear()
						this.$alert('登录已过期，请重新登录 !', '提示', {
							confirmButtonText: '确定',
							callback: action => {
								window.location = 'login.html'
							}
						})
						return
					} else {
						this.$message.error(res.data.msg)
						return
					}
				},
				res => {
					this.$message.error('网络错误！')
					return
				}
			)

			//关闭弹框
			this.StateShowStop = false
			this.StateShowStart = false
		},
		shouMenu() {
			this.shouMenuStatus = !this.shouMenuStatus
		},
		//分页组件->子组件传值
		onChildValue(item) {
			this.pageNum = item[0]
			this.pageSizeNow = item[1]
			this.listShop()
		},
		downloadOrder() {
			//导出订单
			var ruleForm_date1 = ''
			var ruleForm_date2 = ''
			if (this.ruleForm.date1 != '' && this.ruleForm.date2 != '') {
				//开始时间与结束时间必须同时存在
				ruleForm_date1 = this.ruleForm.date1
				ruleForm_date2 = this.ruleForm.date2
			}

			if (this.shop_name == '') {
				this.shop_sn = ''
			}

			var s_departmentIds_Arr = []
			this.s_time_slot.forEach(element => {
				let [id, name] = element.split('|')
				s_departmentIds_Arr.push(id.toString())
			})
			let obj = {
				token: JSON.parse(sessionStorage.getItem('manageInfo')).token,
				business_id: this.business_id,
				name: this.shop_name,
				shop_sn: this.shop_sn,
				area_id: s_departmentIds_Arr.toString(),
				type: this.type,
				sign_status: this.sign_status,
				is_order: this.yg_status,
				city_id: this.city_id,
				status: this.status,
				origin: this.origin,
				is_prepay: this.is_prepay,
				business_director: this.business_director,
				isPreset: 1,
				start_time: ruleForm_date1,
				end_time: ruleForm_date2,
				agent_id: this.agent_id
			}
			let next_obj = {}
			if (+this.order == 1) {
				next_obj = { ...obj, order: JSON.stringify({ add_time: -1 }) }
			} else if (+this.order == 2) {
				next_obj = { ...obj, order: JSON.stringify({ task_count: -1 }) }
			}

			let param = $.param(next_obj)
			window.location.href = this.url + '/shop/exportList?' + param
		},
		//列表的显示
		setDate(a, element, index) {
			let end_time = this.$moment('2021-01-15 ' + element.end_time)
				.add('minutes', 1)
				.format('HH:mm')

			this.weekdata[a].arr.push({
				sn: element.sn,
				job_id: element.job_type,
				start: element.start_time,
				hours: common.getConvertTime(end_time) - common.getConvertTime(element.start_time),
				end: element.end_time,
				num: element.person_num
			})
		},

		//全选-取消全选商圈
		selectAllArea() {
			let arr = []
			this.areaList.forEach(item => {
				arr.push(`${item.id}|${item.area_name}`)
			})
			if (this.areaStatus == true) {
				this.s_time_slot = arr
			} else {
				this.s_time_slot = []
			}
			this.areaStatus = !this.areaStatus
			// this.shearchBtn()
		},

		changeBtndialogarea() {
			this.shearchBtn()
		},
		// 监听城市val变化
		async changeCity(val) {
			if (!val) {
				this.city_id = ''
				this.city_name = ''
				this.city_sn = ''
				this.shop_sn = ''
				this.areaList = []
				this.s_time_slot = []
				this.area_id = ''
				this.shop_name = this.$route.query.shop_name || ''
				this.shop_id = this.$route.query.shop_id || ''
				return
			}
			let [id, name, city_sn] = this.city_val.split('|') // es6 数组解构赋值
			this.city_id = id
			this.city_name = name
			this.city_sn = city_sn
			this.shop_sn = ''
			this.shop_name = this.$route.query.shop_name || ''
			this.shop_id = this.$route.query.shop_id || ''
			await this.fetchShopList()
			await this.listArea(this.city_id) //商圈列表
		},

		async setValue(arrVal) {
			this.agent_id = arrVal.agent_id
			this.cityList = arrVal.city_list
			this.city_val = this.cityList[0].name
			this.city_id = this.cityList[0].id
			this.shop_sn = ''
			this.shop_name = this.$route.query.shop_name || ''
			this.shop_id = this.$route.query.shop_id || ''
			await this.fetchShopList()
			await this.listArea(this.city_id) //商圈列表
		},
		// 去灵活儿合作页面
		goLhcooperation(row) {
			const { href } = this.$router.resolve({
				path: '/shopCooperationInfo',
				query: { shop_id: row.id, shop_sn: row.shop_sn }
			})
			window.open(href, '_blank')
		},
		goToShopListAccount(row) {
			this.$router.push(`/shopListAccount?id=${row.id}&name=${row.name}`)
		}
	},
	filters: {
		format(val) {
			if (!val || val === '0000-00-00 00:00:00') return ''
			return dayjs(val).format('YYYY-MM-DD')
		}
	}
}
</script>

<style scoped>
.search_box {
	width: 790px;
}
.auditCentent .labels {
	min-height: 100px;
}
.auditCentent .labels .labels_label {
	float: left;
	cursor: pointer;
}
.check_label {
	background: var(--purple4);
	color: #fff;
	border: none;
}
.pdf {
	width: 860px;
	height: 600px;
}
@media (max-width: 767.78px) {
	.titleBox {
		height: 40px;
	}
}

.click_state {
	cursor: pointer;
}

.JobCentent .wrap_top {
	display: flex;
	margin-right: 0px;
}

.autoorder {
	margin-bottom: 20px;
}

.autoorder .switch {
	position: relative;
	top: -2px;
	left: 4px;
}

.autoorder .status {
	font-weight: bold;
}
.downContract {
	background-color: rgba(22, 155, 213, 1);
	border-radius: 5px;
	color: #fff;
	height: 30px;
	line-height: 30px;
	font-size: 12px;
	padding: 0 20px;
	margin-left: 30px;
}
.no_agreement {
	color: #999;
	font-size: 12px;
	line-height: 35px;
	padding-left: 10px;
}

.qr-title {
	display: -webkit-flex;
	display: flex;
	-webkit-justify-content: space-between;
	justify-content: space-between;
}
.qr-title .sign-code-name {
	font-size: 20px;
	text-align: center;
	background: rgb(79, 197, 202);
	padding: 10px 0px;
	color: #ffffff;
	font-weight: bold;
}
.w50 {
	width: 50%;
}
.w100 {
	width: 100%;
}
.qr-box {
	display: flex;
	font-weight: bold;
	font-size: 20px;
	color: #000;
	padding-bottom: 40px;
}
.qr-box .qr {
	text-align: center;
	margin: 0 auto;
}
.qr-box img {
	width: 300px;
	height: 300px;
	margin: 0 auto;
	margin-top: 20px;
}
.InfoFont {
	display: inline-block;
}
</style>
<style>
.shop_list .el-dialog__body {
	padding: 0;
}
</style>



// WEBPACK FOOTER //
// src/components/shop/ShopList.vue